<template>
	<view>
		<view class="list">
			<view class="list-item" @click="changeDeviceId()">
				<text class="list-item-title" >设备ID</text>
				<text class="list-item-value">{{ deviceId }}</text>
				<!-- <uni-icons type="right" size="14px" color="#999"></uni-icons> -->
			</view>
			<view class="list-item">
				<text class="list-item-title">版本号</text>
				<text class="list-item-value">{{ version }}</text>
				<!-- <uni-icons type="right" size="14px" color="#999"></uni-icons> -->
			</view>
		</view>
		
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="更换设备ID" :value="deviceId" placeholder="请输入设备ID"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="关闭" confirmText="确定" title="温馨提示" content="设备ID更换成功，请重启设备"
				@confirm="dialogClose" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceId: '',
				version: ''
			}
		},
		onLoad() {
			this.deviceId = getApp().globalData.deviceId;
		},
		methods: {
			changeDeviceId() {
				this.$refs.inputDialog.open();
			},
			dialogInputConfirm(val) {
				if (val) {
					val = val.replace(/[\s\r\n]/g, '');
					getApp().globalData.deviceId = val;
					uni.setStorageSync('deviceIdStorage', val);
					this.$refs.alertDialog.open();
				}
				this.$refs.inputDialog.close();
			},
			dialogClose() {
				this.$refs.alertDialog.close();
				this.$refs.addressChangeDialog.close();
			},
		}
	}
</script>


<style>
	.list {
		border-radius: 10px;
		overflow: hidden;
		background-color: #fff;
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 15px;
		position: relative;
	}

	/* 隔行变色 */
	.list-item:nth-child(odd) {
		background-color: #ffffff;
	}

	.list-item:nth-child(even) {
		background-color: #f8f8f8;
	}

	/* 标题和内容的布局（保持原有逻辑） */
	.list-item-title {
		flex: 1;
		font-size: 16px;
		color: #333;
	}

	.list-item-value {
		flex: 1;
		text-align: right;
		font-size: 16px;
		color: #666;
		padding-right: 10px;
	}

	/* 可选项：添加分割线 */
	.list-item:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 15px;
		right: 15px;
		bottom: 0;
		height: 1px;
		background-color: #eee;
	}
</style>